{% extends "base.html" %}

{% block js %}
<script src="{{ url_for('static', filename='js/jquery.tablesorter.min.js') }}"></script>
<script type="text/javascript" id="js">
$(document).ready(function() {
  var timeExtraction = function(node) {
    if ($(node).attr('data-time-in-seconds') !== undefined) {
      return '-' + node.getAttribute('data-time-in-seconds');
    } else {
      return node.innerHTML;
    }
  }
  $("#todolist-overview-table").tablesorter({
    textExtraction: timeExtraction
  });
});
</script>
{% endblock %}

{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/table.css') }}">
{% endblock %}

{% block body %}
<section class="header">
  <h2 class="title">Todolist overview</h2>
  <div class="row">
    <div class="three columns value-prop"></div>
    <div class="six columns">
      {% if form.errors %}
        <div class="has-error"><strong>Todos should neither be empty nor be longer than 128 characters.</strong></div>
      {% endif %}
      <form action="{{ url_for('main.add_todolist') }}" method=post>
        {{ form.hidden_tag() }}
        <dl>
          <dd>{{ form.title(class_="u-full-width", placeholder="Enter a title to start a new todolist", value="", maxlength=128) }}
          <dt>{{ form.submit }}
        </dl>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="u-full-width">
      <h6 class="docs-header todolist-overview">All your todolists</h6>
      <table id="todolist-overview-table" class="tablesorter">
        <thead>
          <tr>
            <th style="width:50%">Todolist title</th>
            <th># Open</th>
            <th># Finished</th>
            <th class="datetime">Created at</th>
          </tr>
        </thead>
        <tbody>
          {% for todolist in current_user.todolists %}
            <tr>
              <td><a href="{{ url_for('main.todolist', id=todolist.id) }}">{{ todolist.title }}</a></td>
              <td>{{ todolist.open_count }}</td>
              <td>{{ todolist.finished_count }}</td>
              <td data-time-in-seconds="{{ todolist.created_at|in_seconds }}">{{ todolist.created_at|humanize }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}
